<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用scriptaculous库</title>
<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>
<style type="text/css">
	.demo{
		padding:10px;
		background-color: #666;
		border:5px solid red;	
		width: 300px;
		margin-bottom: 20px;
	}
	li{
		border:1px solid #000;
		padding:10px;
		margin-top: 10px;	
		font-family: arial,verdana,sans-serif;
		background-color: #d6d6d6;
		list-style-type: none;
		width: 150px;
	}
</style>
</head>
<body>
	<div class="container">
		<div class="demo" id="demo-effect_shake" onclick="new Effect.Shake(this);">
			Effect.Fade		
		</div>
		<div class="demo" id="demo-effect-shrink" onclick="new Effect.Shrink(this);
			window.setTimeout('Effect.Appear(\'demo-effect-shrink\',{duration:.3})',2500);">
			Effect.Shrink
			</div>
			<div class="demo" id="demo-effect-fade" onclick="new Effect.Fade(this);
				window.setTimeout('Effect.Appear(\'demo-effect-fade\',{duration:.3})',2500);">
				Effect.Fade
				</div>
				<div class="demo" id="demo-effect-puff" onclick="new Effect.Puff(this);
					window.setTimeout('Effect.Appear(\'demo-effect-puff\',{duration:.3})',2500);">
					Effect.Puff
					</div>
					<div>
						<ul id="items_list">
							<li id="item_1">Item 1</li>
							<li id="item_2">Item 2</li>
							<li id="item_3">Item 3</li>
							<li id="item_4">Item 4</li>
						</ul>
						<script type="text/javascript">
							Sortable.create("items_list",{dropOnEmpty:true,constraint:false});
						</script>
					</div>
	</div>
</body>
</html>